<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>castArray(CSS美化应用)</title>
    <link rel="stylesheet" href="https://www.unpkg.com/ew-color-picker/dist/ew-color-picker.min.css">
    <style>
        /* 基本的页面样式 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: #f7f7f7;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .app-container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            width: 300px;
        }

        h1 {
            font-size: 24px;
            margin-bottom: 20px;
            text-align: center;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            font-size: 14px;
            margin-bottom: 5px;
            display: block;
        }

        input[type="color"],
        select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .btn {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn:hover {
            background-color: #45a049;
        }

        .preview-box {
            margin-top: 20px;
            padding: 20px;
            background-color: #f0f0f0;
            border-radius: 8px;
            text-align: center;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="app-container">
        <h1>CSS 美化工具</h1>

        <div class="form-group">
            <label for="text-color">选择字体颜色:</label>
            <div id="text-color"></div>
        </div>

        <div class="form-group">
            <label for="bg-color">选择背景颜色:</label>
            <div id="bg-color"></div>
        </div>

        <div class="form-group">
            <label for="font-family">选择字体:</label>
            <select id="font-family">
                <option value="Arial">Arial</option>
                <option value="Courier New">Courier New</option>
                <option value="Georgia">Georgia</option>
                <option value="Times New Roman">Times New Roman</option>
                <option value="Verdana">Verdana</option>
            </select>
        </div>

        <button id="apply-styles" class="btn">应用样式</button>

        <div class="preview-box" id="preview-box">
            <p>这是预览区域！您可以在这里查看应用的样式。</p>
        </div>
    </div>

    <script src="https://www.unpkg.com/ew-color-picker@1.9.8/dist/ew-color-picker.min.js"></script>
    <script>
        const castArray = (v) => (Array.isArray(v) ? v : [v]);
        const fontFamilySelect = document.getElementById('font-family');
        const applyButton = document.getElementById('apply-styles');
        const previewBox = document.getElementById('preview-box');
        let bgColor, textColor;
        new ewColorPicker({
            el: '#text-color',
            sure(color) {
                textColor = color;
            },
        });

        new ewColorPicker({
            el: '#bg-color',
            sure(color) {
                bgColor = color;
            }
        });

        // 当点击“应用样式”按钮时
        applyButton.addEventListener('click', () => {
            // 获取用户选择的样式
            const fontFamily = fontFamilySelect.value;

            // 使用castArray确保值是数组
            const textColorArray = castArray(textColor); // 即使选择了单一颜色，也会转成数组
            const bgColorArray = castArray(bgColor); // 背景颜色也是类似

            // 将样式应用到预览区域
            previewBox.style.color = textColorArray[0]; // 只取数组中的第一个值
            previewBox.style.backgroundColor = bgColorArray[0]; // 同样处理背景颜色
            previewBox.style.fontFamily = fontFamily;
        });

    </script>
</body>

</html>